<template>
	<div class="sceditor">
		<Editor
			v-model="contentValue"
			:init="init"
			:disabled="disabled"
			:placeholder="placeholder"
			@onClick="onClick"
		/>
	</div>
</template>

<script>
import API from "@/api";
import Editor from "@tinymce/tinymce-vue";
import tinymce from "tinymce/tinymce";
import "tinymce/themes/silver";
import "tinymce/icons/default";
import "tinymce/models/dom";

// 引入编辑器插件
import "tinymce/plugins/code"; //编辑源码
import "tinymce/plugins/image"; //插入编辑图片
import "tinymce/plugins/media"; //插入视频
import "tinymce/plugins/link"; //超链接
import "tinymce/plugins/preview"; //预览
import "tinymce/plugins/template"; //模板
import "tinymce/plugins/table"; //表格
import "tinymce/plugins/pagebreak"; //分页
import "tinymce/plugins/lists"; //列
import "tinymce/plugins/advlist"; //列
import "tinymce/plugins/quickbars"; //快速工具条

export default {
	components: {
		Editor,
	},
	props: {
		modelValue: {
			type: String,
			default: "",
		},
		placeholder: {
			type: String,
			default: "",
		},
		height: {
			type: Number,
			default: 300,
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		plugins: {
			type: [String, Array],
			default:
				"code image media link preview table quickbars template pagebreak lists advlist",
		},
		toolbar: {
			type: [String, Array],
			default:
				"undo redo |  forecolor backcolor bold italic underline strikethrough link | blocks fontfamily fontsize | \
					alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | pagebreak | \
					image media table template preview | code selectall",
		},
		templates: {
			type: Array,
			default: () => [],
		},
		options: {
			type: Object,
			default: () => {},
		},
	},
	data() {
		return {
			init: {
				language_url: "tinymce/langs/zh_CN.js",
				language: "zh_CN",
				skin_url: "tinymce/skins/ui/oxide",
				content_css: "tinymce/skins/content/default/content.css",
				menubar: false,
				statusbar: true,
				plugins: this.plugins,
				toolbar: this.toolbar,
				toolbar_mode: "sliding",
				font_size_formats: "12px 14px 16px 18px 22px 24px 36px 72px",
				height: this.height,
				placeholder: this.placeholder,
				branding: false,
				resize: true,
				elementpath: true,
				content_style: "",
				templates: this.templates,
				quickbars_selection_toolbar:
					"forecolor backcolor bold italic underline strikethrough link",
				quickbars_image_toolbar: "alignleft aligncenter alignright",
				quickbars_insert_toolbar: false,
				image_caption: true,
				image_advtab: true,
				convert_urls: false,
				images_upload_handler: function (blobInfo) {
					return new Promise((resolve, reject) => {
						const data = new FormData();
						data.append(
							"file",
							blobInfo.blob(),
							blobInfo.filename(),
						);
						API.common.upload
							.post(data)
							.then((res) => {
								resolve(res.data.src);
							})
							.catch(() => {
								reject("Image upload failed");
							});
					});
				},
				setup: function (editor) {
					editor.on("init", function () {
						this.getBody().style.fontSize = "14px";
					});
					editor.on("OpenWindow", function (e) {
						//FIX 编辑器在el-drawer中，编辑器的弹框无法获得焦点
						var D = document.querySelector(".el-drawer.open");
						var E = e.target.editorContainer;
						if (D && D.contains(E)) {
							var nowDA = document.activeElement;
							setTimeout(() => {
								document.activeElement.blur();
								nowDA.focus();
							}, 0);
						}
					});
				},
				...this.options,
			},
			contentValue: this.modelValue,
		};
	},
	watch: {
		modelValue(val) {
			this.contentValue = val;
		},
		contentValue(val) {
			this.$emit("update:modelValue", val);
		},
	},
	mounted() {
		tinymce.init({});
	},
	methods: {
		onClick(e) {
			this.$emit("onClick", e, tinymce);
		},
	},
};
</script>

<style></style>
